<template>
  <el-dialog
    title="日志详情"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :fullscreen="true"
    :visible.sync="visible"
    width="75%">
    <table
      class="el-table el-table--fit el-table--border el-table--enable-row-transition el-table--medium el-table__body">
      <tr class="el-table__row">
        <td>日志id</td>
        <td>{{ jobLogEntity.logId }}</td>
        <td>任务id</td>
        <td>{{ jobLogEntity.jobId }}</td>
        <td>bean名称</td>
        <td>{{ jobLogEntity.beanName }}</td>
      </tr>
      <tr class="el-table__row">
        <td>参数</td>
        <td>{{ jobLogEntity.params }}</td>
        <td>任务状态</td>
        <td>
          <el-tag v-if="jobLogEntity.status === 0" size="small">运行中</el-tag>
          <el-tag v-else-if="jobLogEntity.status === 1" size="small">成功</el-tag>
          <el-tag v-else size="small" type="danger">失败</el-tag>
        </td>
        <td>耗时</td>
        <td>{{jobLogEntity.times}} ms</td>
      </tr>
      <tr class="el-table__row">
        <td>创建时间</td>
        <td colspan="2">{{jobLogEntity.createTime}} ms</td>
        <td>结束时间</td>
        <td colspan="2">{{jobLogEntity.endTime}} ms</td>
      </tr>
    </table>
    <section class="log-content">
      <pre class="log-content-pre">
          <div v-html="logContent"></div>
      </pre>
    </section>
  </el-dialog>
</template>
<style>
  .log-content {
    line-height: 14px !important;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #eee;
    height: 600px;
    overflow-y: auto;
  }

  .log-content-pre {
    font-size: 12px;
    position: relative;
    margin: 0;
  }
</style>
<script>
  export default {
    name: 'schedule-log-info',
    data() {
      return {
        fromLineNum: 0,
        visible: false,
        pullFailCount: 0,
        jobLogEntity: {},
        logRun: 0,
        logId: '',
        logContent: ''
      }
    },
    methods: {
      init(id) {
        this.logContent = ""
        this.fromLineNum = 0
        this.pullFailCount = 0
        this.logId = id
        this.visible = true
        this.jobLogEntity = {}
        const $this = this
        this.$http({
          url: this.$http.adornUrl("/sys/scheduleLog/info/" + id),
          method: "get"
        }).then(({data}) => {
          if (data && data.status === 1) {
            this.jobLogEntity = data.content;
          }
        })
        this.pullLog()
        this.logRun = setInterval(function () {
          $this.pullLog()
        }, 3000);
      },
      pullLog() {
        if (this.pullFailCount++ > 200) {
          this.logRunStop('<span style="color: red;">终止请求Rolling日志,请求失败次数超上限,可刷新页面重新加载日志</span>');
          return;
        }
        // load
        console.log("pullLog, fromLineNum:" + this.fromLineNum);
        this.$http({
          url: this.$http.adornUrl("/sys/scheduleLog/logDetailCat"),
          method: "get",
          params: this.$http.adornParams({
            logId: this.logId,
            fromLineNum: this.fromLineNum
          })
        }).then(({data}) => {
          if (data && data.status === 1) {
            if (!data.content) {
              console.log('pullLog fail');
              return;
            }
            if (this.fromLineNum != data.content.fromLineNum) {
              console.log('pullLog fromLineNum not match');
              return;
            }
            if (this.fromLineNum > data.content.toLineNum) {
              console.log('pullLog already line-end');

              // valid end
              if (data.content.end) {
                this.logRunStop('<br><span style="color: green;">[Rolling Log Finish]</span>');
                return;
              }

              return;
            }

            // append content
            this.fromLineNum = data.content.toLineNum + 1;
            this.logContent = this.logContent + data.content.logContent
            this.pullFailCount = 0;

            // scroll to bottom
            scrollTo(0, document.body.scrollHeight);        // $('#logConsolePre').scrollTop( document.body.scrollHeight + 300 );

          } else {
            this.$message.error(data.msg)
          }
        })
      },
      logRunStop(content) {
        this.logRun = window.clearInterval(this.logRun);
        if (content) {
          this.logContent = this.logContent + content
        }
      },
      handleClose(done) {
        this.logRunStop()
        done();
      }
    }
  }
</script>

<style scoped>

</style>
